<template>
	<view class="groupList">
		
		<view class="title"
				:style="'height:'+(titleBarHeight+statusBarHeight+15+120)+'px;'">
			<image
				src="https://imgs.ynz666.com/test/2024/09/14/MjMxZWQ2NGZhZjhkOGRiZDQ2MjQ4ZjYwNDY4NGEyNjI=.png"
				mode="aspectFill" class="top_img" :style="'height:'+(titleBarHeight+statusBarHeight+15+120)+'px;'"></image>
				<!-- <view :style="'height:'+(titleBarHeight+statusBarHeight+15+120)+'px;'"></view> -->
				<view class="top-fixed"
					:style="'height:'+ (titleBarHeight+statusBarHeight+15+120) + 'px;'">
					<view class="status_nav" :style="'height:' + statusBarHeight + 'px;'"></view>
					<view class="left-button-box" :style="'height:'+ titleBarHeight +'px;top:'+ statusBarHeight +'px;'"
						@click="tapToBack('back')">
						<image src="../../static/back.png" mode="aspectFill"></image>
					</view>
					<view
						:style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+statusBarHeight+'px;'"
						class="Index_tab_top">
						<view class="tips-title">
							免单列表
						</view>
					</view>
				</view>
				
				<view class="backgImg" :style="'top:'+(titleBarHeight+statusBarHeight)+'px;'">
					<image src="https://imgs.ynz666.com/test/2024/10/08/ODE4ZmE5ZWE1ZDFmNjgyNGE0M2YyMDUyZWVhM2UzZGM=.png" mode="aspectFill" class="backgImg_img"></image>
				</view>
				
				<!-- 导航切换 -->
				<view class="navAll" :style="'top:'+(titleBarHeight+statusBarHeight+15+120)+'px;'">
					<view class="fill"></view>
				</view>
		</view>
		
     <!-- :style="'padding-top:'+(titleBarHeight+statusBarHeight+15+120+84)+'px;'" -->
		<view class="content">
			<view class="item" v-for="(item,index) in groupList" @click="jumpPage(item.ID)" :key="index">
					
				<view class="dw">
					<image src="https://imgs.ynz666.com/test/2024/10/08/ZjUxMjFkZDhhZmE2YjI3ZmZlZDY3ZTQ2MGEyZDg3Mjc=.png" mode="aspectFill" class="dw_img"></image>
					<view class="dw_box">
						至尊免单
					</view>
				</view>
				<view class="top">
					<view class="top_left">
						<view class="finish">
							<view class="fin_left">
								冠杰高尔夫俱乐部（龙华观澜店）
							</view>
							<view class="fin_right">
								<image src="https://imgs.ynz666.com/test/2024/10/08/MDdmZGRiMmU0ZmQ4Zjc1ZDRhMWIwMDlkZTM4OWM5Mjc=.png" mode="aspectFill" class="img"></image>
								<text class="distance">500m</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bot">
					<view class="bot_left">
						<image :src="item.cover" mode="aspectFill" class="img"></image>
					</view>
					
					<view class="bot_right">
						<view class="name">
							高尔夫1小时提供球杆和茶水饮料服务
						</view>
						
						<view class="desc">
						  <view class="desc_item">
						  	<image src="https://imgs.ynz666.com/test/2024/09/12/MTQwNDZkNjVkZTJiZDQ5NTkzNzRmN2E3MzZiMGIwN2Q=.png" mode="aspectFill" class="img"></image>
								<view class="text">
									市面价：398元
								</view>
						  </view>
							
							<view class="desc_item">
								<image src="https://imgs.ynz666.com/test/2024/10/08/N2Y4MTJhODUxMjMyOGY0Njc0Yzc0YjMzZmZkNzZjMjg=.png" mode="aspectFill" class="img"></image>
								<view class="text">
									至尊免单券兑换：398张
								</view>
							</view>
						</view>
						
					</view>
				</view>
				
				<view class="fot">
					<view class="fot_left">
						<view class="favorable">
							<view class="fav1">
								<image src="https://imgs.ynz666.com/test/2024/10/08/ZmE2Mjg5ZDk5MDg2MDI4ZDhlNTU2M2QwNWIyYThhODM=.png" mode="aspectFill" class="fav1_img"></image>
								<view class="fav1_box">
									<view class="t1">至尊免单</view>
									<view class="t2">直接兑换</view>
								</view>
							</view>
							<view class="fav2">
								另有团购优惠
							</view>
						</view>
						<view class="particular">
							<image src="https://imgs.ynz666.com/test/2024/10/08/NDNkNjY1NTc4YjhhNmE3YmUxN2NkMTE4MzJiMjkxOGY=.png" mode="aspectFill" class="par_img"></image>
							<view class="par_text">
								每用户可以兑换2次/每月1次
							</view>
						</view>
					</view>
					<view class="fot_right">
						<view class="btn">
							立即兑换
						</view>
						
					</view>
				</view>
				
			</view>
			
			<view class="item_kong" v-if="groupTotal==0&&groupKong">
				<image class="kong_img" src="https://imgs.ynz666.com/test/2024/09/26/NzJiZWFhMTI3MjlhNzE5ZWE3YTNmZWRiMjEwNzU5YTM=.png"></image>
				<view class="kong_text">
					暂时没有拍品记录哦～去参与起来吧
				</view>
			</view>
			<view class="item_kongBottom" v-if="isLastPage&&groupTotal!=0">
				已经到底了哦～
			</view>
		</view>
	</view>
	<!-- </view> -->
</template>

<script>
	var app = getApp();
	import {
		auctionInstanceList,getCategorySelect,auctionReserve
	} from '../../apis/index.js';
	
	import { getTimertype, getTimestamp } from '@/utils/request/ActivityTime.js';
  import http from '@/utils/request/http.js';
	export default {
		data() {
			return {
				titleBarHeight: 0,
				statusBarHeight: 0,
				windowHeight: 0,
				navBarHeight: 0,
				bottomTabbar: 0,
				menuButtonInfo: 0,
				navIndex: 0,
				mineInfo: {},
				phoneFlag: false,

				par: {
					page: 1,
					pageSize: 10,
					categoryID:'0',
					auctionStatus:[1],
					participated:0,//是否参与(我参加的竞拍) ;0所有 1参与
					status: [0,1],
					location: ''
				},
				latitude: 0,
				longitude: 0,

				groupList: [
					
				],
				groupKong:false,//判断缺省图显示
				isLastPage: false,
				groupTotal:0,
			}
		},
		onReady() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 + uni
				.getMenuButtonBoundingClientRect().height;
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarHeight = uni.getMenuButtonBoundingClientRect().height + (uni.getMenuButtonBoundingClientRect().top -
				uni.getSystemInfoSync().statusBarHeight) * 2;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.paddTop = this.statusBarHeight + this.navBarHeight
		},
		onLoad(options) {
			let that = this;
			app.getLocation().then(res => {
				that.latitude = res.result.location.lat;
				that.longitude = res.result.location.lng;


				console.log(options, "optionsoptionsoptions")
				
				console.log(that.latitude, "0000000000000000000000000000")
				app.isLogin({}, function(login) {
					that.mineInfo = login;
					// that.GetTypeList();
					console.log(that.latitude, "1111111111111111111111")
					that.getSecKillData();
					console.log(that.mineInfo, "that.mineInfo")
					if (that.mineInfo.phone && that.mineInfo.phone.length == 11) {
						that.phoneFlag = true;
					} else {
						that.phoneFlag = false;
					}
				})
				
				if (options.scene) {
					let xuScene = decodeURIComponent(options.scene)
					let xuData = {}
					let xuParams = xuScene.split(',')
					for (var i in xuParams) {
						console.log(xuParams[i])
						//把一个字符串分割成字符串数组 split值可以更换 例如：: , = 或者其它; 案例 ID=278 输出：ID,278
						var val = xuParams[i].split('=');
						val.length > 0 && val[0] && (xuData[val[0]] = val[1] || null)
					}
					// 判断是不是销售
					if (xuData.sId) {
						console.log(222)
						console.log(xuData.sId, "xuData.sId")
						http.post('/api/platform/v1/sale/log', {
							id: xuData.sId
						}).then(event => {
							console.log(event,"eventeventeventeventeventeventeventevent")
						})
						uni.setStorageSync('xiuXianSaleId', xuData.sId);
					}
				}
			}).catch(rej => {
				that.latitude = rej.lat;
				that.longitude = rej.lng;
				app.isLogin({}, function(login) {
					that.mineInfo = login;
					// that.GetTypeList();
					that.getSecKillData();
					console.log(that.mineInfo, "that.mineInfo")
					if (that.mineInfo.phone && that.mineInfo.phone.length == 11) {
						that.phoneFlag = true;
					} else {
						that.phoneFlag = false;
					}
				})
			})

		},
		onShow() {
			let that = this;

		},
		onReachBottom() {
			console.log(111)
			if (this.groupTotal!==this.groupList.length) {
				this.par.page++;
				this.getSecKillData();
			}
		},
		onPullDownRefresh(){
			let that = this;
			uni.showToast({
				title:'刷新中',
				icon:"loading",
				mask:true
			})
			setTimeout(() => {
				that.par.page = 1;
				that.groupList = [];
				
				that.getSecKillData();
				uni.hideNavigationBarLoading() //完成停止加载
				uni.stopPullDownRefresh() //停止下拉刷新
				uni.hideToast();
			},1500);
		},
		onShareAppMessage() {
			return {
				title: '下楼休闲吧，竞拍吗',
				path: '/pageB/auctionList/auctionList'
			}
		},
		methods: {
			// 返回按钮
			tapToBack(page) {
				switch(page){
					case 'index':
						uni.switchTab({
							url:'../index/index'
						})
					break;
					case 'back':
						uni.navigateBack({
							delta:1,
							fail() {
								uni.switchTab({
									url:'../index/index'
								})
							}
						})
					break;
				}
			},
			jumpPage(id) {
				uni.navigateTo({
					url: `/pageE/auctionDetail/auctionDetail?id=${id}`
				});
			},
			getSecKillData() {
				this.par.location = this.latitude + "," + this.longitude;
				auctionInstanceList(this.par).then(res => {
					console.log(res.data,"res.data")
					this.groupTotal=res.data.total
					if (res.data.total > 0) {
						
						// this.groupList = this.par.page == 1 ? res.data.data : this.groupList.concat(res.data.data);
						this.groupList.push(...res.data.list);
						
						
						console.log(this.groupList,"this.groupList")
						
						this.isLastPage = (res.data.total==this.groupList.length)
            console.log(this.isLastPage,"this.isLastPage")
						
						
						this.groupKong=true


					}else{
						this.groupKong=true
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F4F4;
	}

	.groupList {
		.title {
			width: 100%;
			// position: fixed;
			// top: 0;
			// width: 100vw;
			// z-index: 5;
			.top_img{
				width: 100%;
				position: fixed;
				top: 0;
				z-index: 1;
			}
			.top-fixed{
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 5;
				.left-button-box {
					// width: 160rpx;
					// background-color: rgba(255, 255, 255, 0.5);
					// border-radius: 40rpx;
					display: flex;
					// justify-content: center;
					align-items: center;
					// margin-left: 30rpx;
					// border: 1rpx solid rgba(224, 224, 224, 0.6);
					position: absolute;
					left: 30rpx;
					z-index: 27;
				
					.line {
						height: 30rpx;
						background: #CCCCCC;
						width: 1rpx;
					}
				
					image {
						width: 30rpx;
						height: 30rpx;
						margin: 0 20rpx;
					}
				}
			}
			.status_nav {
				width: 100vw;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 3;
			}
			//  自定也首页顶部导航
			.Index_tab_top {
				z-index: 20;
				width: 100%;
				display: flex;
				position: fixed;
				left: 0;
				// align-items: center;
				flex-direction: column;
			  justify-content: center;
				.areaCbox {
					margin-left: 30rpx;
					font-size: 28rpx;
					font-weight: bolder;
					color: #fff;
				}
			
				.tips-title {
					font-weight: bold;
					width: 200rpx;
					position: absolute;
					left: 50%;
					margin-left: -100rpx;
					text-align: center;
					font-size: 36rpx;
					color: #FFFFFF;
					// color: #fff;
					// margin-left: 30rpx;
					// display: flex;
					// align-items: center;
				}
				
			
				.img {
					width: 151rpx;
					height: 42rpx;
					// position: absolute;
					// left: 50%;
					// margin-left: -94rpx;
				}
			
				.title {
					width: 186rpx;
					height: 32rpx;
					position: absolute;
					left: 50%;
					margin-left: -93rpx;
				}
			}
			
			.backgImg{
				position: fixed;
				left: 0;
				z-index: 10;
				.backgImg_img{
					width: 630rpx;
					height: 134rpx;
					margin-left: 34rpx;
					margin-top: 60rpx;
				}
			}
			
			
			// 切换 全部与个人
			.navAll{
				position: fixed;
				width: 100%;
				height: 36rpx;
				background: #F4F4F4;
				margin-top: -20rpx;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				z-index: 11;
				.fill{
					width: 100%;
					height: 20rpx;
					background: #F4F4F4;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
				}
				.navOne{
					// width: 100%;
					margin: 0 188rpx;
					height: 64rpx;
					display: flex;
					// align-items: center;
					justify-content: space-between;
					.item{
						font-weight: 500;
						font-size: 30rpx;
						color: #9C9C9C;
					}
					.item_active{
						font-weight: bold;
						font-size: 30rpx;
						color: #1E1E1E;
					}
				}
				.navTwo{
					width: 100%;
					overflow-x: auto;
					display: -webkit-box;
					.item{
						padding: 0 12rpx;
						height: 52rpx;
						background: #F3F3F3;
						border-radius: 4rpx;
						font-weight: 500;
						font-size: 26rpx;
						color: #B4B4B4;
						margin-right: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.item:nth-child(1){
						margin-left: 34rpx;
					}
					.item_active{
						padding: 0 12rpx;
						height: 52rpx;
						background: #FFEEEF;
						border-radius: 4rpx;
						font-weight: 500;
						font-size: 26rpx;
						color: #FF1617;
					}
				}
			}
			
			.top-nav {
				height: 400rpx;
				position: relative;

				.img {
					width: 100%;
					height: 400rpx;
					z-index: 3;
					position: absolute;
					top: 0;
				}

				.nav_box {
					height: 400rpx;
					width: 100%;
					display: flex;
					justify-content: center;
					position: absolute;
					top: 0;
					z-index: 5;

					.view {
						position: absolute;
						bottom: 57rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #FFFFFF;
						display: flex;
						align-items: center;

						.view_djs {
							display: flex;
							align-items: center;

							.shijian {
								padding: 0 10rpx;
								min-width: 24rpx;
								height: 36rpx;
								background: #FFFFFF;
								border-radius: 10rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #F43B00;
								margin: 0 8rpx;
							}
						}
					}

					.bottom {
						position: absolute;
						bottom: -2rpx;
						width: 100%;
						height: 32rpx;
						background: #F4F4F4;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						z-index: 6;
					}

					.share {
						position: absolute;
						bottom: 57rpx;
						right: 0;
						width: 100rpx;
						height: 56rpx;
						background: rgba(249, 119, 77, 0.76);
						border-radius: 28rpx 0px 0px 28rpx;

						.share_box {
							width: 100rpx;
							height: 56rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;

							.share_img {
								width: 22rpx;
								height: 22rpx;
							}

							text {
								margin-left: 4rpx;
							}
						}

						button {
							width: 100rpx;
							height: 56rpx;
							border-radius: 28rpx 0px 0px 28rpx;
							position: absolute;
							top: 0;
							left: 0;
							opacity: 0;
							border: 1rpx solid red;
						}
					}
				}
			}

			.title_nav {
				// position: fixed;
				
				height: 95rpx;
				margin: 0 20rpx;
				background: #F4F4F4;
				overflow-x: auto;
				display: -webkit-box;
				padding-top: 7rpx;

				.item {
					padding: 0 18rpx;
					height: 56rpx;
					background: #FFFFFF;
					border-radius: 28rpx;
					margin-right: 16rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
					display: flex;
					align-items: center;
				}

				.item_active {
					background: linear-gradient(270deg, #F43B00 0%, #FA6D00 100%);
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.content {
			margin: 0 20rpx;
			padding-top: 22rpx;

			.item {
			padding: 40rpx 22rpx 28rpx 38rpx;
				height: 306rpx;
				width: 650rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(187,158,158,0.2);
				border-radius: 16rpx;
        margin-bottom: 26rpx;
				position: relative;
				.dw{
					width: 468rpx;
					height: 32rpx;
					top: -1rpx;
					left: 0;
					position: absolute;
					.dw_img{
						width: 468rpx;
						height: 32rpx;
					}
					.dw_box{
						width: 468rpx;
						height: 32rpx;
						top: 0;
						left: 0;
						position: absolute;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						padding-left: 10rpx;
					}
				}
				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 18rpx;
					.top_left {
						display: flex;
						align-items: center;
						width: 100%;
						.finish {
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 100%;
							.fin_left{
								font-weight: 500;
								font-size: 30rpx;
								color: #10121C;
							}
							.fin_right{
								display: flex;
								align-items: center;
								.img{
									width: 18rpx;
									height: 18rpx;
								}
								.distance{
									font-weight: 500;
									font-size: 20rpx;
									color: #35363F;
									padding-left: 6rpx;
								}
							}
						}
					}
				}

				.bot {
					display: flex;

					.bot_left {
						width: 140rpx;
						height: 140rpx;
						border-radius: 20rpx;
						display: flex;
						.img{
							width: 140rpx;
							height: 140rpx;
							border-radius: 20rpx;
						}
					}

					.bot_right {
						padding-left: 20rpx;
            width: 456rpx;
						.name {
							width: 100%;
							display: flex;
							align-items: center;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #10121C;
						}

						.desc {
							display: flex;
							flex-direction: column;
							padding-top: 12rpx;
							.desc_item{
								display: flex;
								align-items: center;
								margin-bottom: 12rpx;
								.img{
									width: 36rpx;
									height: 36rpx;
								}
								.text{
									font-weight: 400;
									font-size: 24rpx;
									color: #2B2B2B;
									padding-left: 14rpx;
								}
							}
						}

					}
				}
				
				.fot{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 16rpx;
					.fot_left{
						display: flex;
						flex-direction: column;
						.favorable{
							display: flex;
							align-items: center;
							.fav1{
								width: 192rpx;
								height: 34rpx;
								position: relative;
								.fav1_img{
									width: 192rpx;
									height: 34rpx;
								}
								.fav1_box{
									width: 192rpx;
									height: 34rpx;
									position: absolute;
									left: 0;
									top: 0;
									display: flex;
									align-items: center;justify-content: space-around;
									.t1{
										font-weight: bold;
										font-size: 20rpx;
										color: #FFFFFF;
									}
									.t2{
										font-weight: bold;
										font-size: 20rpx;
										color: #F17228;
									}
								}
							}
							.fav2{
								display: flex;
								align-items: center;
								justify-content: center;
								margin-left: 20rpx;
								height: 32rpx;
								background: #FFFFFF;
								border-radius: 4rpx;
								border: 1rpx solid #F17228;
								padding: 0 14rpx;
								font-weight: 500;
								font-size: 20rpx;
								color: #F17228;
							}
						}
						.particular{
							display: flex;
							align-items: center;
							padding-top: 18rpx;
							.par_img{
								width: 30rpx;
								height: 30rpx;
							}
							.par_text{
								font-weight: 400;
								font-size: 22rpx;
								color: #A4A5AD;
								padding-left: 10rpx;
							}
						}
					}
					.fot_right{
						display: flex;
						align-items: center;
						.btn{
							width: 192rpx;
							height: 58rpx;
							background: linear-gradient( 90deg, #F1605D 0%, #FF1617 100%);
							border-radius: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 600;
							font-size: 26rpx;
							color: #FEFEFE;
						}
					}
				}
			}
      .item_kong {
      	display: flex;
      	flex-direction: column;
      	align-items: center;
      	justify-content: center;
      	padding-top: 100rpx;
      
      	.kong_img {
      		width: 350rpx;
      		height: 350rpx;
      		border-radius: 50%;
      	}
      
      	.kong_text {
      		font-weight: 400;
      		font-size: 28rpx;
      		color: #666666;
      		width: 440rpx;
      		text-align: center;
      		margin-top: 20rpx;
      	}
      }
			.item_kongBottom {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				padding: 20rpx 0 30rpx;
			}
		}

	}

</style>
